<template>
    <div id="app">
        <!--<view-box ref="viewBox" body-padding-bottom="55px">-->
        <div class="vue-main-body">
            <keep-alive>
                <router-view v-if="$route.meta.keepAlive"></router-view>
            </keep-alive>
            <router-view v-if="!$route.meta.keepAlive"></router-view>


            <tabbar  icon-class="vux-center" v-show="tabShow" slot="bottom">
                <tabbar-item :link="{path:'/switch'}" :selected="tabSelect==1">
                    <!--<span class="demo-icon-22 vux-demo-tabbar-icon-home" slot="icon" style="position:relative;top: -2px;">&#xe637;</span>-->
                    <light-icon type="kongzhi" slot="icon"></light-icon>
                    <span slot="label">控制</span>
                </tabbar-item>
                <tabbar-item :link="{path:'/collection'}" :selected="tabSelect==2">
                    <!--<span class="demo-icon-22 vux-demo-tabbar-icon-home" slot="icon" style="position:relative;top: -2px;">&#xe637;</span>-->
                    <light-icon type="collection" slot="icon"></light-icon>
                    <span slot="label">采集</span>
                </tabbar-item>
                <tabbar-item :link="{path:'/person'}" :selected="tabSelect==3">
                    <!--<span class="demo-icon-22" slot="icon">&#xe633;</span>-->
                    <light-icon type="yonghu1" slot="icon"></light-icon>
                    <span class="tab-item-label" slot="label">用户</span>
                </tabbar-item>
            </tabbar>
        </div>
        <!--</view-box>-->
    </div>
</template>

<script>
    import LightIcon from './components/light-icon.vue'
    import ViewBox from "../node_modules/vux/src/components/view-box/index";
    export default {
        name: 'App',
        components: {
            ViewBox,
            LightIcon
        },
        data(){
            return{

            }
        },
        computed:{
            tabShow(){
                 switch (this.$store.state.currentPath){
                     case '/switch':
                     case '/collection':
                     case '/person':
                         return true;
                     default:
                         return false;
                 }
            },
            tabSelect(){
                switch (this.$store.state.currentPath){
                    case '/switch':
                        return 1;
                    case '/collection':
                        return 2;
                    case '/person':
                        return 3;
                    default:
                        return 0;
                }
            }
        }
    }
</script>

<style lang="less">
    html,body{
        height:100%;
        width:100%;
        overflow: hidden;
        padding: 0;
        margin: 0;
    }
    *{
        margin: 0;
        padding: 0;
    }
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #2c3e50;
        height: 100%;
        overflow: auto;
    }

    .vue-main-body {
        padding-bottom: 55px;
        overflow: auto;
    }

    .weui-tabbar {
        position: fixed!important;
    }
    .weui-tabbar__item{
        text-decoration: none;
    }
    .weui-tabbar__icon + .weui-tabbar__label {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
</style>
